<!DOCTYPE HTML>
<!--
     Any copyright is dedicated to the Public Domain.
     http://creativecommons.org/publicdomain/zero/1.0/
-->
<html><head>
  <meta charset="utf-8">
  <title>CSS Grid Test: subgrid margin/border/padding that overflow the edge track</title>
  <link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">
  <link rel="help" href="https://drafts.csswg.org/css-grid-2">
  <link rel="match" href="subgrid-mbp-overflow-001-ref.html">
<style>
html,body {
  color:black; background-color:white; font:16px/1 monospace; margin:0; padding:0;
}

.grid {
  display: inline-grid;
  grid: auto / 7px 30px 10px 20px 5px;
  justify-content: space-around;
  align-content: start;
  border: 3px solid;
  width: 80px;
}
.rtl { direction: rtl; }

.subgrid {
  display: grid;
  grid: auto / subgrid;
  min-width: 0;
  min-height: 30px;
  background: pink;
  border:1px solid;
  margin: 0 4px 0 3px;
  position: relative;
}
.c1 { grid-column: 2 / span 1; }
.c2 { grid-column: 2 / span 2; }
.c3 { grid-column: 2 / span 3; }
.pr { padding-right: 30px; }
.pl { padding-left: 30px; }
.plr { padding: 0 50px 0 80px; }

y {
  background: blue;
  height: 10px;
}
y:nth-of-type(1) { grid-column: 2; }
y:nth-of-type(2) { grid-column: 4; }

x { background: silver; }
x:nth-of-type(2) { background: purple; }
x:nth-of-type(3) { background: magenta; }

a {
  position: absolute;
  grid-column-start: 1;
  inset: 0;
  top: 3px;
  border-top: 2px solid grey;
}
a:nth-of-type(2) {
  grid-column-start: 2;
  top: 6px;
}
a:nth-of-type(3) {
  grid-column-start: 3;
  top: 9px;
}

b {
  position: absolute;
  grid-column-end: 1;
  inset: 0;
  top: 12px;
  border-top: 2px solid grey;
}
b:nth-of-type(2) {
  grid-column-end: 2;
  top: 15px;
}
b:nth-of-type(3) {
  grid-column-end: 3;
  top: 18px;
}

.f { float:left; margin-left:80px; }
</style>
</head>
<body>

<div class=f>
<div class="grid">
  <y></y><y></y>
  <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c3 pr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c3 pl"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c3 plr"><x></x><a></a><b></b><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

</div>

<div class=f>
<div class="grid">
  <y></y><y></y>
  <div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c2 pr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c2 pl"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c2 plr"><x></x><a></a><b></b><x></x><a></a><b></b></div>
</div>

</div>

<div class=f>
<div class="grid">
  <y></y><y></y>
  <div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid">
  <y></y><y></y>
  <div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c1 pr"><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c1 pl"><x></x><a></a><b></b></div>
</div>

<br>

<div class="grid rtl">
  <y></y><y></y>
  <div class="subgrid c1 plr"><x></x><a></a><b></b></div>
</div>

</div>

</body>
</html>
